import React,{Component} from 'react';
import { 
	StyleSheet,
	View, 
	Text,
	Image, 
	TouchableWithoutFeedback
} from 'react-native';
export default class HomeHeader extends Component {
	render(){
		return (
			<View style={styles.headerBox}>
				<TouchableWithoutFeedback onPress={()=>alert('前往搜索页面')}>
					<View style={styles.headerBoxSearch}>
				        <Image style={styles.headerBoxSearchImg} source={require('../../images/Search-Icon.png')}/>
				        <Text style={{fontSize: 13, color: '#707070'}}>搜索</Text>
				    </View>
				</TouchableWithoutFeedback>
				<TouchableWithoutFeedback onPress={()=>this.props.navigate('Message')}>
			   		<Image style={styles.headerBoxMess} source={require('../../images/mess.png')}/>
				</TouchableWithoutFeedback>
			</View>
		)
	}
}

const styles = StyleSheet.create({
    headerBox: {
	    flexDirection: 'row',
	    height: 44,
	    backgroundColor: '#FFF',
	    paddingTop: 8,
	    paddingBottom: 8,
	    paddingLeft: 10,
	    paddingRight: 10,
	},
	headerBoxSearch: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#efeff1',
        borderRadius: 20,
        marginLeft: 8,
        marginRight: 8,
    },
    headerBoxSearchImg: {
        width: 13,
        height: 13,
        marginRight: 8,
    },
    headerBoxMess: {
        width: 24,
        height: 20,
        marginTop: 4
    }
});